import React, {Component, useEffect, useState} from 'react';
import axios from "axios";

class App extends Component {
    state = {
        type: 1
    }

    render() {
        return <div>
            <ul>
                <li onClick={() => this.setState({type: 1})}>正在热映</li>
                <li onClick={() => this.setState({type: 2})}>即将上映</li>
            </ul>
            <FilmItem type={this.state.type}/>
        </div>
    }
}

function FilmItem(props) {
    const [list, setList] = useState([])

    useEffect(() => {
        // 发起ajax请求
        if (props.type === 1) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2056417',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                setList(res.data.data.films);
            })
        } else if (props.type === 2) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=401339',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                setList(res.data.data.films);
            })
        }
    }, [props.type]) // 相当于监听props.type值的变化 如果有变化则重新执行一次useEffect函数

    return <div>
        <ul>
            {
                list.map(item => {
                    return <li key={item.filmId}>{item.name}</li>
                })
            }
        </ul>
    </div>
}

export default App;